<template>
    <div>
        <Category :scene="scene"></Category>
        <el-card style="margin: 10px 0;">
            <el-button type="primary" size="default" @click="" icon="Plus" :disabled="categoryStore.c3Id?false:true">添加SPU</el-button>
            <el-table :data="records" style="margin: 10px 0;" border>
                <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
                <el-table-column label="SPU名称" prop="spuName"></el-table-column>
                <el-table-column show-overflow-tooltip  label="SPU描述" prop="description"></el-table-column>
                <el-table-column label="SPU操作">
                    <template #="{row,$index}">
                        <el-button title="添加SKU" icon="Plus" type="primary" size="small"></el-button>
                        <el-button title="修改SKU" icon="Edit" type="primary" size="small"></el-button>
                        <el-button title="查看SKU" icon="View" type="primary" size="small"></el-button>
                        <el-button title="删除SKU" icon="Delete" type="primary" size="small"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                v-model:current-page="pageNo"
                @current-change="getHasSpu"
                v-model:page-size="pageSize"
                :background="true"
                :page-sizes="[3,5,7,9]"
                layout="prev, pager, next, jumper,->,sizes, total "
                :total="total"
                @size-change="changeSize"
                :pager-count="7">
                
            </el-pagination>
            
        </el-card>
    </div>
</template>

<script setup lang="ts">
    import { ref,watch } from 'vue';
    import { HasSpuResponseData,Records } from '@/api/product/spu/type';
    import { reqHasSpu } from '@/api/product/spu';
    import useCategoryStore from '@/store/modules/category';
    let categoryStore = useCategoryStore()
    let pageNo = ref<number>(1)
    let pageSize = ref<number>(3)
    let scene = ref<number>(0)
    let records = ref<Records>([])
    let total = ref<number>(0)
    watch(()=>categoryStore.c3Id,()=>{
        if(!categoryStore.c3Id) return
        getHasSpu()
    })
    const getHasSpu = async(pager=1)=>{
        pageNo.value = pager
        let result:HasSpuResponseData = await reqHasSpu(pageNo.value,pageSize.value,categoryStore.c3Id)
        if(result.code==200){
            records.value = result.data.records
            total.value = result.data.total
        }
   }
   const changeSize = ()=>{
        getHasSpu()
   }
</script>

<style scoped>

</style>